import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';

interface Box {
  id: number;
  config: any;
}

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  boxes: Array<Box> = [];
  private curNum;
  gridConfig: NgGridConfig = <NgGridConfig>{
    'margins': [5],
    'draggable': true,
    'resizable': true,
    'max_cols': 0,
    'max_rows': 0,
    'visible_cols': 0,
    'visible_rows': 0,
    'min_cols': 1,
    'min_rows': 1,
    'col_width': 2,
    'row_height': 2,
    'cascade': 'up',
    'min_width': 50,
    'min_height': 50,
    'fix_to_grid': false,
    'auto_style': true,
    'auto_resize': false,
    'maintain_ratio': false,
    'prefer_new': false,
    'zoom_on_drag': false,
    'limit_to_screen': true
  };

  option = {
    series: [{
      type: 'liquidFill',
      data: [0.6]
    }]
  };

  chartOption = {
    title: {
      text: '基础雷达图'
    },
    tooltip: {},
    legend: {
      data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#fff',
          backgroundColor: '#999',
          borderRadius: 3,
          padding: [3, 5]
        }
      },
      indicator: [
        {name: '销售（sales）', max: 6500},
        {name: '管理（Administration）', max: 16000},
        {name: '信息技术（Information Techology）', max: 30000},
        {name: '客服（Customer Support）', max: 38000},
        {name: '研发（Development）', max: 52000},
        {name: '市场（Marketing）', max: 25000}
      ]
    },
    series: [{
      name: '预算 vs 开销（Budget vs spending）',
      type: 'radar',
      // areaStyle: {normal: {}},
      data: [
        {
          value: [4300, 10000, 28000, 35000, 50000, 19000],
          name: '预算分配（Allocated Budget）'
        },
        {
          value: [5000, 14000, 28000, 31000, 42000, 21000],
          name: '实际开销（Actual Spending）'
        }
      ]
    }]
  };
  itemPositions: Array<any> = [];
  echartsIntance: any;
  liquetInstance: any;

  @ViewChild('liqud')
  liqudElement: any;

  @ViewChild('chart')
  chart: any;

  constructor(el: ElementRef) {
    const dashconf = this._generateDefaultDashConfig();
    for (let i = 0; i < dashconf.length; i++) {
      const conf = dashconf[i];
      conf.payload = 1 + i;
      this.boxes[i] = {id: i + 1, config: conf};
    }
    this.curNum = dashconf.length + 1;
  }

  ngOnInit() {
  }

  _generateDefaultItemConfig(): NgGridItemConfig {
    return {'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 1, 'sizey': 1};
  }

  _generateDefaultDashConfig(): NgGridItemConfig[] {
    return [
      {'dragHandle': '.handle', 'col': 1, 'row': 1, 'sizex': 40, 'sizey': 40},
      {'dragHandle': '.handle', 'col': 41, 'row': 1, 'sizex': 40, 'sizey': 40},
    ];
  }

  addBox(): void {
    const conf: NgGridItemConfig = this._generateDefaultItemConfig();
    conf.payload = this.curNum++;
    this.boxes.push({id: conf.payload, config: conf});
  }

  removeWidget(index: number): void {
    if (this.boxes[index]) {
      this.boxes.splice(index, 1);
    }
  }

  updateItem(index: number, event: NgGridItemEvent): void {
    // Do something here
  }

  onDrag(index: number, event: NgGridItemEvent): void {
    // Do something here
  }

  onResize(index: number, event: NgGridItemEvent): void {
    console.dir(event.height);
    // this.liqudElement.nativeElement.style.height = event.height + 'px';
    // this.liqudElement.nativeElement.style.width = event.width + 'px';
    this.chart.nativeElement.style.height = event.height + 'px';
    this.chart.nativeElement.style.width = event.width + 'px';
    this.echartsIntance.resize();
    this.liquetInstance.resize();
  }

  onChartInit(ec) {
    this.echartsIntance = ec;
    this.echartsIntance.resize();
  }

  onLiqudChartInit(ec) {
    this.liquetInstance = ec;
    this.liquetInstance.resize();
  }
}
